<template>
	<!-- 评论组件 -->
	<div class="discussion">
		<header>
			<span class="title">短评</span>
		</header>
		<div class="comments">
			<article class="no-padding-top" v-for="item in hotComments" :key="item.id">
				<div>
					<img :src="item.avatarUrl" alt="" />
				</div>
				<div class="right">
					<div class="top">
						<div class="title-container">
							<div class="name-box">
								<div class="name">{{ item.nick }}</div>
							</div>
							<div class="commentstar">
								<div class="star-wrap">
									<span class="star-score">{{ item.score }}</span>
									<span class="star-word">分</span>
								</div>
								<span class="commentstar-buyticket" v-if="item.tagList && item.tagList.name">{{
                  item.tagList[1].name
                }}</span>
							</div>
						</div>
						<div class="title-appove">
							<div class="hierarchy">
								<img src="https://p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
									alt="" />
								<span class="approve-word">{{ item.upCount }}</span>
							</div>
						</div>
					</div>
					<div class="middle">
						<span class="comment-content">{{ item.content }}</span>
					</div>
					<div class="bottom">
						<span class="time">{{ item.time | formatDate }}</span>
						<span class="reply">{{ item.replyCount }} <span>回复</span>
						</span>
					</div>
				</div>
			</article>
		</div>
	</div>
</template>

<script>
	import {formatDate} from "../data.js";

	export default {
		props: {
			hotComments: Array,
		},
		components: {},
		methods: {},
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, "MM-dd");
			},
		},
	};
</script>

<style lang="less" scoped>
	.discussion {
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		overflow: hidden;
		position: relative;

		header {
			display: flex;
			justify-content: space-between;
			padding: 13px 16px 14px;

			.title {
				font-size: 15px;
				color: #333;
			}
		}

		.comments {
			.no-padding-top {
				padding-top: 0;
			}

			article {
				padding: 15px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				div {
					img {
						height: 34px;
						width: 34px;
						border-radius: 50%;
					}
				}
			}

			.right {
				margin-left: 11px;
				flex-grow: 1;

				.top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.title-container {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.name-box {
							display: flex;
							align-items: center;

							.name {
								font-size: 12px;
								color: #333;
							}
						}

						.commentstar {
							display: flex;
							flex-direction: row;
							justify-content: start;
							align-items: center;

							.star-wrap {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.star-score {
									font-size: 12px;
									color: #faaf00;
									font-family: PingFangSC-Regular;
									display: block;
									transform: scale(0.92);
								}

								.star-word {
									transform: scale(0.75);
									font-size: 12px;
									color: #faaf00;
									font-family: PingFangSC-Regular;
									display: block;
								}
							}

							.commentstar-buyticket {
								border: 0.5px solid #4f89b3;
								border-radius: 10px;
								padding: 0 5px;
								font-family: PingFangSC-Regular;
								color: #4f89b3;
								font-size: 12px;
								text-align: center;
								display: block;
								transform: scale(0.75);
							}
						}
					}

					.title-appove {
						border-radius: 50%;
						text-align: center;
						height: 26px;
						line-height: 26px;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						padding: 0 10px;

						.hierarchy {
							z-index: 9;

							img {
								width: 16px;
								height: 16px;
								display: inline-block;
								vertical-align: middle;
							}

							.approve-word {
								font-weight: 400;
								font-size: 12px;
								color: #999;
								font-family: PingFangSC-Regular;
								margin-left: 5.5px;
							}
						}

						&::after {
							content: " ";
							position: absolute;
							top: 0;
							left: 0;
							width: 200%;
							height: 52px;
							transform: scale(0.5);
							transform-origin: 0 0;
							border: 1px solid #ccc;
							border-radius: 26px;
						}
					}
				}

				.middle {
					margin-top: 5px;

					.comment-content {
						font-size: 15px;
						color: #333;
						line-height: 21px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 7;
						text-overflow: ellipsis;
						word-wrap: break-word;
						word-break: break-all;
						overflow: hidden;
					}
				}

				.bottom {
					margin-top: 10px;
					font-size: 12px;
					color: #666;

					.time {
						font-size: 12px;
						color: #666;
					}

					.reply {
						display: inline-block;
						background: #eef1f6;
						border-radius: 10.5px;
						text-align: center;
						font-size: 12px;
						color: #5a7cab;
						padding: 2px 6px;
						margin-left: 8px;

						span {
							margin-left: 4px;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>
